<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>个人中心</title>
		<link href="/css/bootstrap.min.css" rel="stylesheet">

			<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
			<style>
body {
	padding-top: 50px;
	padding-bottom: 40px;
	color: #5a5a5a;
}

/* 下面是左侧导航栏的代码 */
.sidebar {
	position: fixed;
	top: 51px;
	bottom: 0;
	left: 0;
	z-index: 1000;
	display: block;
	padding: 20px;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: #ddd;
	border-right: 1px solid #eee;
}

.nav-sidebar {
	margin-right: -21px;
	margin-bottom: 20px;
	margin-left: -20px;
}

.nav-sidebar>li>a {
	padding-right: 20px;
	padding-left: 20px;
}

.nav-sidebar>.active>a, .nav-sidebar>.active>a:hover, .nav-sidebar>.active>a:focus
	{
	color: #fff;
	background-color: #428bca;
}

.main {
	padding: 20px;
}

.main .page-header {
	margin-top: 0;
}
</style>
</head>

<body>
	<!--下面是顶部导航栏的代码-->
	<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed"
				data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="/"><img src="picture/logo.png"
				style="width: 80px" /></a>
		</div>

		<div class="collapse navbar-collapse"
			id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown">个人中心<span class="caret"></span></a>
					<ul class="dropdown-menu" role="menu">
						<li><a href="#" onclick="showUserinfo()">个人信息</a></li>
						<li><a href="#" onclick="showAddress()">收货地址</a></li>
						<li><a href="#" id="safe">安全信息</a></li>
					</ul></li>
				<li><a href="#">帮助</a></li>
			</ul>
			<form class="navbar-form navbar-right" role="search">
				<div class="form-group">
					<input type="text" class="form-control" placeholder="...">
				</div>
				<button type="submit" class="btn btn-default">搜索</button>
			</form>
		</div>
	</div>
	</nav>

	<!—自适应布局-->
	<div class="container-fluid">
		<div class="row">
			<!—左侧导航栏-->

			<div class="col-sm-3 col-md-2 sidebar">
				<ul class="nav nav-sidebar">
					<li class="active"><a href="/">首页</a></li>
				</ul>
				<ul class="nav nav-sidebar">
					<li><strong>个人中心</strong></li>
					<li><a href="#" onclick="showUserinfo()">个人信息</a></li>
					<li><a href="#" onclick="showAddress()">收货地址</a></li>
					<li><a href="#" id="safe">安全信息</a></li>
				</ul>
				<ul class="nav nav-sidebar">
					<li><strong>购物信息</strong></li>
					<li><a href="/shoppingCart" id="shoppingCart">购物车</a></li>
					<li><a href="/order" id="order">我的订单</a></li>
					<li><a href="/help" id="help">帮助</a></li>
				</ul>
			</div>

			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
				<div id="userinfo">
					<form action="/user/update">
						<h2 class="form-signin-heading">用户信息</h2>
						<br>
						<br> 
						<label for="username" class="col-sm-2 control-label">用户名</label> 
						<input type="username" name="userinfo.username" class="form-control"
								value="#(userinfo.username)" required autofocus> <br>
						<label for="password" class="col-sm-2 control-label">密码</label>
						<input type="password" name="userinfo.password" class="form-control" value="#(userinfo.password)" required>
						<br> 
						<label for="telephone" class="col-sm-2 control-label">电话号码</label> 
						<input type="telephone" name="userinfo.telephone" class="form-control" value="#(userinfo.telephone??)"
								required> 
						<br> 
						<label for="email" class="col-sm-2 control-label">邮箱</label> 
						<input type="email" name="userinfo.email" class="form-control"
								value="#(userinfo.email??)" required> 
						<br>
						<button class="btn btn-lg btn-primary btn-block" type="submit">修改</button>
					</form>
				</div>
				<div id="address">
					<div class="table_box">
						<h2>现有地址</h2>
						<table class="list">
							<tbody>
								<tr>
									<th width="12%">姓名</th>
									<th width="35%">收货详细地址</th>
									<th width="12%">邮政编码</th>
									<th width="12%">电话号码</th>
									<th width="12%">操作</th>

								</tr>

								#for(x : address)
								<tr>
									<td style="text-align: left;">#(x.name)</td>
									<td style="text-align: left;">#(x.address)</td>
									<td style="text-align: left;">#(x.postcode)</td>
									<td style="text-align: left;">#(x.telephone)</td>
									<td style="text-align: left;">&nbsp;&nbsp;<a
										href="/address/delete/#(x.id)">删除</a> &nbsp;&nbsp;<a
										href="/address/edit/#(x.id)">修改</a>
									</td>
								</tr>
								#end
							</tbody>
						</table>
					</div>
							<!--	<div>
		    <form action="/address/add" >
		        <h2 class="form-signin-heading">收货地址</h2>
				<br>
				<br>
				<label for="username" class="col-sm-2 control-label">姓名</label>
		        <input type="username" name="userinfo.username" class="form-control" value="#(userinfo.username)" required autofocus>
				<br>
				<label for="password" class="col-sm-2 control-label">收货详细地址</label>
		        <input type="password" name="userinfo.password" class="form-control" value="#(userinfo.password)" required>
				<br>
				<label for="telephone" class="col-sm-2 control-label">邮政编码</label>
		        <input type="telephone" name="userinfo.telephone" class="form-control" value="#(userinfo.telephone??)" required>
				<br>
				<label for="email" class="col-sm-2 control-label">电话号码</label>
		        <input type="email" name="userinfo.email" class="form-control" value="#(userinfo.email??)" required>
				<br>
		        <button class="btn btn-lg btn-primary btn-block" type="submit">修改</button>
		     </form>
			</div> -->
				</div>
			</div>

			<script src="/js/jquery.min.js"></script>
			<script src="/js/bootstrap.min.js"></script>
			<script>
				$(document).ready(function(){
					$("#userinfo").show();
					$("#address").hide();
					});
				function showUserinfo(){
					$("#userinfo").show();
					$("#address").hide();
				}
				function showAddress(){
					$("#userinfo").hide();
					$("#address").show();
				}
			</script>
</body>
</html>



